<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="title">
			<image ></image>
			<text>筛选</text>
			<view class="ima" @click="screen">
				<text>重置</text>
				<image src="@/static/images/s21.png" mode="widthFix"></image>
			</view>
		</view> -->
		<hea-ders title='筛选'>
					<image slot='left' src="../../../../static/images/arrow_left.png" mode="widthFix"></image>
					<text slot='official'>重置</text>
		</hea-ders>
		
		<view class="bac">
			<view class="fls">
				<text>仓库</text>
				<view class="chang" @click="stock">
					<text>请选择</text>
					<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="fls">
				<text>商品</text>
				<view class="chang" @click="shopselect">
					<text>请选择</text>
					<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="fls">
				<text>库存显示类型</text>
				<view class="changs">
					<xfl-select
					 class="ri"
					:list="list" 
					:clearable="false" 
					:showItemNum="5" 
					:listShow="false" 
					:isCanInput="false" 
					:style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" 
					 :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
			<view class="fls">
				<text>商品价格显示</text>
				<view class="changs">
					<xfl-select
					 class="ri"
					:list="list" 
					:clearable="false" 
					:showItemNum="5" 
					:listShow="false" 
					:isCanInput="false" 
					:style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" 
					 :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
			<view class="fls">
				<text>显示停用</text>
				<view class="chan">
				   <switch style="transform: scale(0.7,0.7)"  @change="switch1Change" />
				</view>
			</view>
			<view class="fls">
				<text>显示无业务数据商品</text>
				<view class="chan">
				   <switch style="transform: scale(0.7,0.7)"  @change="switch2Change" />
				</view>
			</view>
			<view class="fls">
				<text>实物数量</text>
				<view class="changs">
					<xfl-select
					 class="ri"
					:list="list" 
					:clearable="false" 
					:showItemNum="5" 
					:listShow="false" 
					:isCanInput="false" 
					:style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" 
					 :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
			<view class="fls">
				<text>可用数量</text>
				<view class="changs">
					<xfl-select
					 class="ri"
					:list="list" 
					:clearable="false" 
					:showItemNum="5" 
					:listShow="false" 
					:isCanInput="false" 
					:style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" 
					 :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
			<view class="fls">
				<text>账面数量</text>
				<view class="changs">
					<xfl-select
					 class="ri"
					:list="list" 
					:clearable="false" 
					:showItemNum="5" 
					:listShow="false" 
					:isCanInput="false" 
					:style_Container="'height: 100%; font-size: 16px;'"
					 :placeholder="'placeholder'" 
					 :initValue="'苹果'">
					</xfl-select>
				</view>
			</view>
		</view>
		<button type="primary">确定</button>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default {
		components:{xflSelect,heaDers},
		data() {
			return {
				list: [ //要展示的数据
					'苹果',
					{
						value: '香蕉',
						disabled: false
					},
					'葡萄',
					'芒果',
					'大白菜',
				],
			}
		},
		methods: {
			stock(){
				uni.navigateTo({
					url:'../stockselect/stockselect'
				})
			},
			shopselect(){
				uni.navigateTo({
					url:'../shopselect/shopselect'
				})
			},
			switch1Change: function (e) {
			     console.log('switch1 发生 change 事件，携带值为', e.target.value)
					},
			switch2Change: function (e) {
			   console.log('switch2 发生 change 事件，携带值为', e.target.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.center {
	width: 100%;
height: 100vh;
	box-sizing: border-box;
	background: rgba(245, 245, 245, 1);
	.tit {
		width: 100%;
		height: 50rpx;
		box-sizing: border-box;
	}
	
	.title {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: rgba(36, 153, 246, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		image {
	
			width: 22rpx;
		}
	
		text {
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			font-family: PingFang SC;
		}
	
		.ima {
			text {
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:33rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				margin-right: 10rpx;
			}
			image {
				width: 30rpx;
				margin-left: 5rpx;
				vertical-align: middle;
			}
		}
	}
	.bac {
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		.fls {
			width: 100%;
			height: 88rpx;
			border-bottom: 1rpx solid #e0e0e0;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			text {
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:40rpx;
				color:rgba(66,66,66,1);
				opacity:1;
			}
			.chang{
				display: flex;
				text{
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:40rpx;
					color:rgba(158,158,158,1);
					opacity:1;
					margin-right: 10rpx;
				}
				image{
					width: 20rpx;
					vertical-align: middle;
				}
			}
			.changs{
				width: 30%;
				line-height: 10rpx;
			}
		}
		.fls:last-child {
			border-bottom: none;
		}
	}
	button{
		border-radius: 0;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		}
	}
</style>
